<template>
  <div class="large-screen-group">
    <div class="title">
      {{ LeftTitle.title }}
    </div>
    <div class="now">
      <div class="now-cont1 now-item" :class="color">
        <div class="icon">
          <img :src="images" alt="" />
        </div>
        <div class="text">
          <p>{{ LeftTitle.smallTitle }}</p>
          <span>{{ myCount(this.grouplist.total) }}</span>
        </div>
      </div>
      <div class="now-cont4 now-item">
        <gauge-group :grouplist="grouplist" :ispage="true"></gauge-group>
      </div>
      <div class="now-cont5 now-item">
        <div class="box" v-for="(item, index) in titleList" :key="index">
          <gauge-long-group
            :title="titleList[index]"
            :grouplist="grouplist"
          ></gauge-long-group>
        </div>
      </div>
      <div class="now-cont6 now-item">
        <div class="pienumber" v-if="pieNumber && pieLable !== ' '">
          <span class="name">{{ pieLable }}</span>
          <span>{{ pieNumber + "%" }}</span>
        </div>
        <div class="pie" ref="pie1"></div>
        <div class="textlist">
          <div v-for="(item, index) in pie1" :key="item.name">
            <span>{{ myCount(item.value) }}</span>
            <span>{{ item.name }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import onLine from "./onLine";
import oilbox from "./oilbox";
import GaugeGroup from "./GaugeGroup";
import GaugeLongGroup from "./GaugeLongGroup";
/*import countTo from 'vue-count-to'*/
const keys = ["国三", "国四", "国五", "国六"];
export default {
  name: "BLargeScreenGroup",
  components: {
    onLine,
    oilbox,
    GaugeGroup,
    GaugeLongGroup,
    /* countTo*/
  },
  data() {
    return {
      /*gauge-long-group*/
      titleList: ["柴油车", "天然气"],
      pie1: [],
      pieNumber: 0,
      pieLable: "",
    };
  },
  computed: {},
  props: {
    LeftTitle: {
      type: Object,
      default: {},
    },
    grouplist: {
      type: Object,
      default: {},
    },
    color: {
      type: String,
      default: "now1",
    },
    images: {
      type: String,
      default: "",
    },
  },
  mounted() {},
  methods: {
    myCount(num) {
      return this.myfun.myformat(num);
    },
    PiePage(data, ref) {
      let myChart4 = this.$echarts.getInstanceByDom(ref);
      if (myChart4 == undefined) {
        myChart4 = this.$echarts.init(ref);
      }
      let Opt;
      Opt = {
        tooltip: {
          show: false,
        },
        legend: {
          show: false,
        },
        series: [
          {
            type: "pie",
            clockwise: true,
            left: 17,
            top: 17,
            width: 170,
            height: 170,
            center: ["50%", "50%"],
            radius: ["60%", "100%"],
            avoidLabelOverlap: false,
            label: {
              show: !true,
            },
            emphasis: {
              show: true,
            },
            /*selectedOffset : -30,*/
            labelLine: {
              show: false,
            },
            data: data,
          },
        ],
        color: [
          "#f95454",
          "#ff9500",
          "#07e7f3",
          "#07e6ac",
          "#5d4ef2",
          "#e915d8",
        ],
      };
      myChart4.setOption(Opt);
      myChart4.on("mouseout", (row, index) => {
        this.pieNumber = 0;
        this.pieLable = " ";
      });
      myChart4.on("mouseover", (row, index) => {
        this.pieNumber = row.percent;
        this.pieLable = row.name;
      });
    },
  },
  watch: {
    LeftTitle() {
      // console.log(this.LeftTitle)
    },
    grouplist: {
      /*immediate:true,*/
      deep: true,
      handler(newValue, oldValue) {
        // console.log(newValue,oldValue)
        if (newValue.standardEmissionsInCY) {
          let { standardEmissionsInCY } = this.grouplist;
          this.pie1 = [];
          for (const k of keys) {
            if (standardEmissionsInCY.hasOwnProperty(k)) {
              this.pie1.push({
                name: k,
                value: standardEmissionsInCY[k],
              });
            }
          }
          if (this.$refs.pie1 != undefined) {
            this.PiePage(this.pie1, this.$refs.pie1);
          }
        }
      },
    },
  },
};
</script>

<style scoped lang="scss">
.large-screen-group {
  .title {
    font-size: 22px;
    letter-spacing: 0px;
    color: #f0f6fb;
    margin-bottom: 40px;
  }
  .now {
    width: 100%;
    position: relative;
    .now-item {
      width: 100%;
      box-sizing: border-box;
      margin-bottom: 30px;
      &:nth-last-child(1) {
        margin-bottom: 0px;
      }
    }
    .now-cont1 {
      padding-left: 10px;
      padding-right: 50%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      .icon {
        width: 67px;
        height: 67px;
        margin-right: 20px;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
      .text {
        flex: 1;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        p {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          margin: 0px;
          font-size: 20px;
          font-weight: normal;
          letter-spacing: 0px;
          color: #ffffff;
        }
        span {
          width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 26px;
          font-weight: bold;
          font-stretch: normal;
          line-height: 1;
          letter-spacing: 0px;
          color: #e6e6e6;
          margin-top: 12px;
        }
      }
      &.now1 {
        p {
          text-shadow: #3fd9e3 1px 0 0, #3fd9e3 0 1px 0, #3fd9e3 -1px 0 0,
            #3fd9e3 0 -1px 0;
        }
      }
      &.now2 {
        p {
          text-shadow: #419ce4 1px 0 0, #419ce4 0 1px 0, #419ce4 -1px 0 0,
            #419ce4 0 -1px 0;
        }
      }
      &.now3 {
        p {
          text-shadow: #e38b45 1px 0 0, #e38b45 0 1px 0, #e38b45 -1px 0 0,
            #e38b45 0 -1px 0;
        }
      }
    }
    .now-cont4 {
      position: absolute;
      right: 0px;
      top: 0px;
      width: 50%;
      height: 264px;
    }
    .now-cont5 {
      padding-right: 50%;
      .box {
        background: url("~@/assets/image/oil-long.png") no-repeat left center;
        background-size: contain;
        width: 100%;
        height: 74px;
        margin-bottom: 24px;
        box-sizing: border-box;
        padding-left: 100px;
        overflow: hidden;

        &:last-child {
          background: url("~@/assets/image/steam-long.png") no-repeat left
            center;
          margin-bottom: 0px;
        }
      }
    }
    .now-cont6 {
      min-height: 210px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      position: relative;
      .pie {
        width: 200px;
        height: 200px;
        margin-right: 60px;
        background: url("~@/assets/image/bar-bg.png") no-repeat center;
        background-size: contain;
      }
      .pienumber {
        position: absolute;
        width: 200px;
        height: 200px;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        top: 8px;
        left: 2px;

        span {
          color: #fff;
          font-size: 22px;
        }

        .name {
          color: #fff;
          margin-bottom: 5px;
          font-size: 18px;
        }
      }
      .textlist {
        flex: 1;
        height: 200px;
        display: flex;
        flex-wrap: wrap;
        div {
          width: 50%;
          height: 50%;
          margin-bottom: 13px;
          box-sizing: border-box;
          color: #f0f6fb;
          span {
            width: 100%;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            line-height: 1.2;
            &:nth-child(1) {
              font-size: 22px;
              font-weight: bold;
              margin-bottom: 8px;
            }
            &:nth-child(2) {
              font-size: 16px;
              font-weight: normal;
              font-stretch: normal;
            }
          }
          &:nth-child(1) {
            span {
              &:nth-child(2) {
                color: #f95454;
              }
            }
          }
          &:nth-child(2) {
            span {
              &:nth-child(2) {
                color: #ff9500;
              }
            }
          }
          &:nth-child(3) {
            span {
              &:nth-child(2) {
                color: #07e7f3;
              }
            }
          }
          &:nth-child(4) {
            span {
              &:nth-child(2) {
                color: #07e6ac;
              }
            }
          }
          &:nth-child(5) {
            span {
              &:nth-child(2) {
                color: #5d4ef2;
              }
            }
          }
          &:nth-child(6) {
            span {
              &:nth-child(2) {
                color: #e915d8;
              }
            }
          }
          &:nth-child(even) {
            margin-bottom: 0px;
          }
        }
      }
    }
  }
}
</style>
